
<!DOCTYPE html>
<html>
    <head>
        <script src="./js/tfjsvis.umd.min.js"></script>
    </head>
    <body>
        <div id="demo" style="display: block; width: 700px;height: 700px;background-color: lightgray;"></div>
        <!-- <script>
            const suface = document.getElementById("demo");
            const series = ['First','Second'];

            const serie1 = [];
            const serie2 = [];

            for(let i=0; i<100; i++){
                serie1[i] = {x:i,y:Math.random() * 100};
                serie2[i] = {x:i,y:Math.random() * 100};
            }

            const data = {values:[serie1,serie2],series};

            tfvis.render.scatterplot(suface, data);

        </script>
        <script>
            const series0 = ["First","Second"];

            const serie01 = []
            const serie02 = []

            for(let i=0; i< 100; i++){
                serie01[i] = {x:i,y:Math.random()*100};
                serie02[i] = {x:i,y:Math.random()*100};
            }

            const data01 = {values:[serie01,serie02],series0};

            tfvis.render.scatterplot({name:"My Plots"},data);

        </script> -->
        <!-- <script>
            const surface = document.getElementById("demo");
            const data = [
                {index:0,value:100},
                {index:1,value:200},
                {index:2,value:150},
                {index:3,value:250},
            ]

            // tfvis.render.barchart(surface,data);
            tfvis.render.barchart({name:"my Graphs"},data);
        </script> -->
        <script>
            const surface = document.getElementById("demo");
            const values = [
                {x:1,y:20},
                {x:2,y:30},
                {x:3,y:5},
                {x:4,y:12}
            ]

            tfvis.render.linechart(surface,{values});
            tfvis.render.linechart({name:"my Lines"},{values});
        </script>

</body>
</html>